import React, { useEffect, useState } from 'react'
import { useLocation } from 'react-router-dom'
import { Row, Col, Modal, Table, type TableProps, Tag } from 'antd'
// import HeaderTitle from './modules/header-title.tsx'
import DataBox from './modules/dataBox.tsx'
// import WarnBox from './modules/warnBox.tsx'
import HiddenDanger from './modules/hidden-danger.tsx'
import Inform from './modules/inform.tsx'
import GamCount from './modules/gam-count.tsx'
import AlarmCount from './modules/alarm-count.tsx'
import Rehearsal from './modules/rehearsal.tsx'
import Train from './modules/train.tsx'
import { overViewAPI } from '@/apis'

import styles from './index.module.scss';
const Index: React.FC = () => {
  const [listData, setListData] = useState([])
  const [openModal, setOpenModal] = useState(false)
  // const [okText, setOkText] = useState('确定')
  const [dataBoxData, setDataBoxData] = useState<any>({})
  const [hdData, setHdData] = useState<any>([])
  const [informData, setInformData] = useState<any>([])
  const [gcData, setGcData] = useState([])
  const tableColumns:TableProps<any>['columns'] = [
    {
      title: '',
      dataIndex: 'params1',
      key: 'params1',
    },
    {
      title: '',
      dataIndex: 'params2',
      key: 'params2',
    },
    {
      title: '',
      dataIndex: 'params3',
      key: 'params3',
      render: (_, record) => {
        if (record.params3 === 0) {
          return <Tag color="green">待处理</Tag>
        } else if (record.params3 === 1) {
          return <Tag color="red">处理中</Tag>
        } else if (record.params3 === 2) {
          return <Tag color="orange">已处理</Tag>
        } else {
          return <span>{record.params3}</span>
        }
      },
    },
    {
      title: '',
      dataIndex: 'params4',
      key: 'params4',
    },
  ]

  const location = useLocation()
  useEffect(() => {
    console.log('location', location)
    const initPage = async () => {
      const response = await overViewAPI.getShowData({ key: location.pathname })
      console.log(response)
    }
    initPage()
    const timer  = setTimeout(() => {
      const arr = [
        { key: '1', params1: '企业A', params2: '自燃报警', params3: 0, params4: new Date().toLocaleString()},
        {key: '2',params1: '企业B', params2: '设施报警', params3: 1, params4: new Date().toLocaleString()},
        {key: '3',params1: '企业C', params2: '消费报警', params3: 2, params4: new Date().toLocaleString()},
        {key: '4',params1: '企业D', params2: '禁烟去警报', params3: 2, params4: new Date().toLocaleString()},
      ]
      setListData(arr)
      setDataBoxData({ data:'1', data1: '32', data2: '12' })
      setHdData(arr)
      setInformData(arr)
      setGcData([])
    }, 1000)
    return () => {
      timer && clearTimeout(timer)
    }
  }, [])

  // const box1MoreFun = () => {
  //   console.log('moreFun')
  //   setOkText('预警报警详情页面')
  //   setOpenModal(true)
  // }
  const handleOk = () => {
    setOpenModal(false)
  }
  const handleCancel = () => {
    setOpenModal(false)
  }

  return (
    <div className={styles['page-box']}>
      {/*<HeaderTitle eventMessage={searchMessage}></HeaderTitle>*/}
      <Row gutter={[20,20]} wrap={false} align={'stretch'}>
        <Col flex="auto" span={24}>
          <DataBox showData={dataBoxData}></DataBox>
        </Col>
        {/*<Col flex="auto" span={10}>*/}
        {/*  <WarnBox list={listData} moreFun={box1MoreFun}></WarnBox>*/}
        {/*</Col>*/}
      </Row>
      <Row gutter={[20, 20]} style={{marginTop: '20px'}} wrap={false} align={'stretch'}>
        <Col span={16} flex="auto">
          <Row gutter={[20,20]} wrap={false} align={'stretch'}>
            <Col span={12}>
              <HiddenDanger list={hdData}></HiddenDanger>
            </Col>
            <Col span={12}>
              <Inform list={informData}></Inform>
            </Col>
          </Row>
          <Row style={{marginTop: '20px'}}>
            <GamCount data={gcData}></GamCount>
          </Row>
        </Col>
        <Col span={8} flex="auto">
          <AlarmCount data={{}}></AlarmCount>
        </Col>
      </Row>
      <Row gutter={[20,20]} wrap={false} align={'stretch'} style={{marginTop: '20px'}}>
        <Col flex="auto">
          <Rehearsal data={{}}></Rehearsal>
        </Col>
        <Col flex="auto">
          <Train data={{}}></Train>
        </Col>
      </Row>
      <Modal title={'实时预警报警'} cancelText="取消" open={openModal} onOk={handleOk} onCancel={handleCancel}>
        <Table dataSource={listData} pagination={false } columns={tableColumns} showHeader={false}></Table>
      </Modal>
    </div>
  )
}

export default Index
